<template>
  <div>
    <!--
      node-key : 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
      expand-on-click-node	是否在点击节点的时候展开或者收缩节点， 
                默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
      check-on-click-node	是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
      draggable	是否开启拖拽节点功能
      show-checkbox: 显示checkbox
      default-expand-all	是否默认展开所有节点
      draggable="true"
      default-expanded-keys	默认展开的节点的 key 的数组	array
    -->
    <el-tree
      :data="menus"
      :props="defaultProps"
      node-key="catId"
      :default-expanded-keys="expandedkeys"
      show-checkbox
      :expand-on-click-node="false"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <!--
           v-if="node.level <=2" :只有1、2级节点才显示信息
          v-if="node.children.length != 0"  :只有有子节点的时候才能删除
          -->
          <el-button v-if="node.level <=2" type="text" size="mini" @click="() => append(data)">新增</el-button>
          <el-button type="text" size="mini" @click="() => update(data)">修改</el-button>
          <el-button
            v-if="node.childNodes.length==0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog :title="showTitle" :visible.sync="dialogFormVisible">
      <el-form :model="addOrUpdate">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="addOrUpdate.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="saveCommit()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      addOrUpdate: {
        catId: "",
        name: "",
        parentCid: "",
        catLevel: "",
        showStatus: 0,
        sort: ""
      },
      // 类型add update
      type:"" ,
      // 弹出框的标题
      showTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      expandedkeys: []
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/listTree"),
        method: "get"
        // 参数隐藏,
        // params: this.$http.adornParams({
        //   'page': this.pageIndex,
        //   'limit': this.pageSize,
        //   'username': this.dataForm.userName
        // })
      }).then(({ data }) => {
        // 打印data
        // console.info(data.data);
        // 赋值给展示的分类树
        this.menus = data.data;
        // if (data && data.code === 0) {
        //   this.dataList = data.page.list
        //   this.totalPage = data.page.totalCount
        // } else {
        //   this.dataList = []
        //   this.totalPage = 0
        // }
        // this.dataListLoading = false
      });
    },
    append(data) {
      console.info(data);
      this.type ="add";
      // 新增
      this.showTitle = "新增菜单";
      // 出现弹出框
      this.dialogFormVisible = true;
      // 默认值
      this.addOrUpdate.name = "";
      this.addOrUpdate.catId = "";
      this.addOrUpdate.parentCid = data.catId;
      this.addOrUpdate.catLevel = data.catLevel * 1 + 1;
      this.addOrUpdate.showStatus = 1;
      this.addOrUpdate.sort = 0;
    },
    update(data) {
      this.type ="update";
      console.info(data);
      // 新增
      this.showTitle = "修改菜单";
      // 修改
      this.dialogFormVisible = true;

      // 默认值
      this.addOrUpdate.name = data.name;
      this.addOrUpdate.catId = data.catId;
      // 父节点
      this.addOrUpdate.parentCid = data.parentCid;
      this.addOrUpdate.catLevel = data.catLevel;
      this.addOrUpdate.showStatus = data.showStatus;
      this.addOrUpdate.sort = data.sort;
    },
    saveCommit(){
      // 新增，调用新增，修改调用修改
      if(this.type == "add"){
        this.addCommit();
      }
      else if(this.type == "update"){
        this.updateCommit();
      }
    },
    addCommit() {
      // 新增保存
      // 获取对象
      // 发送一个post请求，要填写url,参数
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.addOrUpdate, false)
      }).then(({ data }) => {
        // 写你的成功之后的逻辑
        this.dialogFormVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedkeys = [this.addOrUpdate.parentCid];
      });
    },
    updateCommit() {
      let {catId,name} = this.addOrUpdate;
      console.info({catId,name});
      // 修改保存
      // 写你的成功之后的逻辑
      // 发送一个post请求，要填写url,参数
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({catId,name}, false)
      }).then(({ data }) => {
        // 写你的成功之后的逻辑
        this.dialogFormVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedkeys = [this.addOrUpdate.parentCid];
      });
    },

    remove(node, data) {
      // var ids = [data.catId];
      // this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     this.$http({
      //       url: this.$http.adornUrl("/product/category/delete"),
      //       method: "post",
      //       data: this.$http.adornData(ids, false)
      //     }).then(({ data }) => {
      //       this.$message({
      //         message: "菜单删除成功",
      //         type: "success"
      //       });
      //       //刷新出新的菜单
      //       this.getMenus();
      //       //设置需要默认展开的菜单
      //       this.expandedkeys = [node.parent.data.catId];
      //     });
      //   })
      //   .catch(() => {});

      // console.log("remove", node, data);

      // 删除前，提示是否确认删除
      let ids = [node.data.catId];
      this.$confirm(`确认要删除${node.data.name}分类吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.info(ids);
          // 执行删除
          // 发送一个post请求，要填写url,参数
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
          }).then(({ data }) => {
            console.info("删除成功删除成功删除成功删除成功");
            // 写你的成功之后的逻辑
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            //刷新出新的菜单
            this.getMenus();
            //设置需要默认展开的菜单
            this.expandedkeys = [node.parent.data.catId];
          });
        })
        .catch(() => {});
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 调用初始化
    this.getMenus();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 这里存放数据
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
</style>